<template>
	<view>
		<view class="main">
			<view class="top-sec">
				<view class="ss-bar">
					<view class="search flex-1">
						<u-icon name="search" color="#666" size="28" class="icon"></u-icon>
						<input type="text" class="ipt-txt" placeholder="请输入订单编号/客户名称/商品名称" />
					</view>
					<view class="sift">
						<image src="../../static/images/icon_20.png" class="ico" mode="widthFix"></image>筛选
					</view>
				</view>
				<view class="tab-menu">
					<view class="lk" @click="changeMenu(0)" :class="{cur:btnnum == 0}">全部</view>
					<view class="lk" @click="changeMenu(1)" :class="{cur:btnnum == 1}">充电中</view>
					<view class="lk" @click="changeMenu(2)" :class="{cur:btnnum == 2}">充电完成</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="flex-1">
				<view class="wrap" v-if="btnnum == 0">
					<view class="total">
						订单数量：<text>3</text>
					</view>
					<view class="list">
						<view class="item">
							<view class="top">
								<view class="bh">订单编号：202408131632346544</view>
								<view class="zt wancheng">
									<image src="../../static/images/icon_18.png" class="ico" mode="widthFix"></image>
									充电完成
								</view>
							</view>
							<view class="cen">
								<view class="title">佛山大良保利广场充电站</view>
								<view class="txt">
									<view class="fz">
										<text>充电量：</text>3.14度
									</view>
									<view class="fz">
										<text>充电时长：</text>01:20:00
									</view>
									<view class="fz">
										<text>订单日期：</text>2024-12-17 22:12:33
									</view>
								</view>
							</view>
							<view class="bot">
								订单金额：
								<view class="price">
									￥<text>25.50</text>
								</view>
							</view>
						</view>
						<view class="item">
							<view class="top">
								<view class="bh">订单编号：202408131632346544</view>
								<view class="zt zhong">
									<image src="../../static/images/icon_19.png" class="ico" mode="widthFix"></image>充电中
								</view>
							</view>
							<view class="cen">
								<view class="title">佛山大良保利广场充电站</view>
								<view class="txt">
									<view class="fz">
										<text>充电量：</text>3.14度
									</view>
									<view class="fz">
										<text>充电时长：</text>01:20:00
									</view>
									<view class="fz">
										<text>订单日期：</text>2024-12-17 22:12:33
									</view>
								</view>
							</view>
							<view class="bot">
								订单金额：
								<view class="price">
									￥<text>25.50</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="wrap" v-if="btnnum == 1">
					<view class="total">
						订单数量：<text>3</text>
					</view>
					<view class="list">
						<view class="item">
							<view class="top">
								<view class="bh">订单编号：202408131632346544</view>
								<view class="zt zhong">
									<image src="../../static/images/icon_19.png" class="ico" mode="widthFix"></image>充电中
								</view>
							</view>
							<view class="cen">
								<view class="title">佛山大良保利广场充电站</view>
								<view class="txt">
									<view class="fz">
										<text>充电量：</text>3.14度
									</view>
									<view class="fz">
										<text>充电时长：</text>01:20:00
									</view>
									<view class="fz">
										<text>订单日期：</text>2024-12-17 22:12:33
									</view>
								</view>
							</view>
							<view class="bot">
								订单金额：
								<view class="price">
									￥<text>25.50</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="wrap" v-if="btnnum == 2">
					<view class="total">
						订单数量：<text>3</text>
					</view>
					<view class="list">
						<view class="item">
							<view class="top">
								<view class="bh">订单编号：202408131632346544</view>
								<view class="zt wancheng">
									<image src="../../static/images/icon_18.png" class="ico" mode="widthFix"></image>
									充电完成
								</view>
							</view>
							<view class="cen">
								<view class="title">佛山大良保利广场充电站</view>
								<view class="txt">
									<view class="fz">
										<text>充电量：</text>3.14度
									</view>
									<view class="fz">
										<text>充电时长：</text>01:20:00
									</view>
									<view class="fz">
										<text>订单日期：</text>2024-12-17 22:12:33
									</view>
								</view>
							</view>
							<view class="bot">
								订单金额：
								<view class="price">
									￥<text>25.50</text>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnnum: 0
			}
		},
		onLoad() {

		},
		methods: {
			changeMenu(e) {
				this.btnnum = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/batteryCharging/static/css/common.scss);

	.main {
		height: calc(100vh - env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;

	}

	.top-sec {
		background-color: #fff;
		border-bottom: 1px solid #f4f5f7;

		.ss-bar {
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx;

			.search {
				background: #F8F8FA;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				border-radius:200rpx;
				overflow: hidden;

				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 14rpx;
				}

				.ipt-txt {
					flex: 1;
					overflow: hidden;
					line-height: 72rpx;
					height: 72rpx;
					font-size: 26rpx;
				}
			}

			.sift {
				font-size: 26rpx;
				color: #262626;
				margin-left: 30rpx;
				display: flex;align-items: center;
				.ico{
					width: 22rpx;height: 22rpx;margin-right: 10rpx;
				}
			}
		}

		.tab-menu {
			height: 84rpx;
			padding: 0 65rpx;
			display: flex;
			justify-content: space-between;

			.lk {
				font-size: 28rpx;
				color: #262626;
				line-height: 84rpx;
				position: relative;

				&::after {
					content: '';
					height: 4rpx;
					background-color: #FE5E10;
					width: 0;
					position: absolute;
					left: 50%;
					bottom: 0;
					transition: all 0.3s;
				}

				&.cur {
					color: #FE5E10;

					&::after {
						width: 100%;
						left: 0;
					}
				}
			}
		}
	}

	.wrap {
		padding: 20rpx 20rpx;

		.total {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 20rpx;
			padding: 0 10rpx;

			text {
				color: #FE5E10;
			}
		}

		.list {
			.item {
				padding: 0 30rpx;
				background-color: #fff;
				margin-bottom: 20rpx;

				.top {
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F7F7F7;

					.bh {
						font-size: 26rpx;
						color: #262626;
					}

					.zt {
						font-size: 24rpx;
						line-height: 40rpx;
						display: inline-block;
						vertical-align: middle;
						border-radius: 6rpx;
						padding: 0 15rpx;

						.ico {
							width: 26rpx;
							height: 26rpx;
							margin-right: 8rpx;
							display: inline-block;
							vertical-align: middle;
						}

						&.wancheng {
							color: #67C245;
							background: #F0F9EB;
						}

						&.zhong {
							color: #FE5E10;
							background: #FFF7F2;
						}
					}
				}

				.cen {
					padding: 22rpx 0;

					.title {
						font-size: 32rpx;
						color: #262626;
						line-height: 37rpx;
						font-weight: 700;
						margin-bottom: 14rpx;
					}

					.fz {
						font-size: 24rpx;
						color: #666;
						line-height: 40rpx;

						text {
							color: #9F9F9F;
						}
					}
				}

				.bot {
					height: 85rpx;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #9F9F9F;
					border-top: 1px solid #F7F7F7;

					.price {
						font-size: 26rpx;
						color: #FE5E10;
						font-weight: 700;
						font-family: 'Arial';

						text {
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
</style>